<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>前端开发中如何解决跨域问题</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div></div>
</body>
<script>
  "use strict"; {
    /* 
      跨域：跨域资源共享(缩写CORS)，是浏览器的保护机制，只允许网页请求同一域名下的服务
      同一域名: 协议、域名、端口都要保持一致
      解决跨域分为三种情况下手(后端、前端、服务端)
      方法一: 配置后端
        浏览器是否启动跨域保护机制是根据后端响应来决定的，所以配置后端是最直接的方法，浏览器是根据响应的 access-Control-Allow-Origin 来决定的。如果字段的值为 * 允许所有的请求。如果是域名，只允许指定域名的请求
          nodejs的方法:
            const cors = require("cors")
            const app = express()
            app.use(cors())

      方法二: 前端开发环境中配置代理中转求情
        原理: 跨域浏览器的保护机制，如果脱离了浏览器发送请求，那么它就不会受到跨域保护机制的影响
        vite中的配置
          server: {
            proxy: {
              "/api": {
                target: "http://localhost:5000",
                changeOrigin: true,
                rewrite: path => path.replace("/^\/api/", "")
              }
            }
          },
      
      方法三: 配置代理
    */
  };
</script>

</html>